<template>
	<view class="shop">
		<nt-container>
			<view class="search">
				<view class="search-input">
					<view class="search-input-label" @tap="show=true">
						<text>{{params.area|| '选择城市'}}</text>
					</view>
					<u-search height="80rpx" placeholder="请输入关键词" action-text="查询" v-model="params.keywords"
						:actionStyle="btnStyle" shape="square" @search="search" @custom="search">
					</u-search>
				</view>
			</view>
			<view class="layout">
				<scroll-view class="layout-left">
					<view class="item" :class="{
						active: params.category_id1 === it.id
					}" v-for="(it, idx) in categoryList" :key="it.id" @tap="clickItem(it)">
						{{ it['name'] }}
					</view>
				</scroll-view>
				<view class="layout-right">

					<view class="categoryList2Warp">
						<view class="item" :class="{
							active: params.category_id2 === it2.id
						}" v-for="(it2, idx) in categoryList2" :key="it2.id" @tap="clickItem2(it2)">
							{{ it2['name'] }}
						</view>
					</view>

					<u-list class="list" :height="listHeight" @refresherrefresh="refresherrefresh"
						refresher-background="#F2F4F6" refresher-threshold="50">
						<view class="item" v-for="(it,indxx) in listData" :key="indxx">
							<view class="item-body">
								<view class="image">
									<nt-cdn-image @imageTap="previewImage(it.images_list)"
										v-if="it.images_list.length>0" :src="it.images_list[0]"></nt-cdn-image>
									<view v-if="it.images_list.length==0">
										<u--image height="160rpx" width="160rpx" class="image"
											src='/static/image/noImage.png' mode="scaleToFill">
										</u--image>
									</view>
								</view>
								<view class="content">
									<view class="name" @tap="gotoDetail(it.id)">{{it.parts_name}}</view>
									<view class="number">{{it.area}}->{{it.parts_type}}</view>
									<view class="number">数量：{{it.number}}</view>
									<view class="price"><text class="price-title">{{it.parts_price || 0}}</text>元/个
									</view>
								</view>
							</view>
						</view>
					</u-list>
				</view>
			</view>

			<view class="footer-fixed">
				<u-button class="button" color="#2357E9" type="primary" shape="circle" text="个人中心"
					@click="nav('/subpackage/shop/pages/shop/userCenter')"></u-button>
			</view>
		</nt-container>
		<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @cancel="show=false"></u-picker>
	</view>
</template>

<script>
	import {
		getPartsCategoryPaginate,
		getPersonPartsSelect,
		postPartsApply,
		getPartsApply,
		getPaginate,
		publicConfig
	} from "@/api"
	import {
		appConfig
	} from "@/config"
	export default {
		data() {
			return {
				btnStyle: {
					width: "20%",
					textAlign: "center",
					lineHeight: "80rpx",
					display: "inline-block",
					background: "#1B5BC5",
					color: "#fff",
					borderRadius: "8rpx",
					marginLeft: "3%",
				},
				isPull: false,
				listHeight: '100%',
				params: {
					category_id1: '',
					category_id2: '',
					keywords: '',
					area: ''
				},
				categoryList: [],
				categoryList2: [],
				listData: [],
				isNext: true,
				loading: false,
				show: false,
				columns: [
					[],
				],
			}
		},
		async mounted() {
			let that = this
			uni.$on('getList', async () => {
				// 操作成功 调取接口
				await that.getList()
			})
			await this.getCityList()
			this.params.area = this.$store?.getters?.userInfo?.area ?? '广州'
			this.init()
		},
		beforeDestroy() {
			uni.$off('getList')
		},
		methods: {
			async getCityList() {
				let res = await publicConfig('getCitySelect')
				this.columns = [res.data.map(o => o.value)]
			},
			// 选择城市
			confirm({
				value
			}) {
				this.params.area = value[0]
				this.show = false
				this.getList()
			},
			previewImage(url, current = 0) {
				let urls = url.map(o => (o = appConfig.imgCDN + o.replace(/\\/g, "/")))
				uni.previewImage({
					urls,
					current
				})
			},
			gotoDetail(id) {
				this.nav(`/subpackage/shop/pages/shop/goodsInfo?id=${id}`)
			},
			search() {
				this.getList()
			},
			getList() {
				if (this.loading || !this.isNext) return;
				this.loading = true
				this.listData = []
				this.params.category_id = this.params.category_id2 || this.params.category_id1 || ''
				getPaginate(this.params).then(res => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.listData = data.data;
					}
				}).finally(() => {
					this.loading = false
					setTimeout(() => {
						this.isPull = false
					}, 500)
				})
			},
			getCategoryList() {
				getPartsCategoryPaginate().then(res => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						if (data.length > 0) {
							this.categoryList = [{
								name: '全部',
								id: ''
							}, ...data]
						}
					}
				})
			},
			clickItem(e) {
				this.setHeight()
				if (this.loading) {
					return false
				}
				this.params.category_id1 = e.id
				this.params.category_id2 = ''
				this.categoryList2 = e.id ? [{
						name: '全部',
						id: ''
					}, ...e.level_list] : [],
					this.getList()
			},
			clickItem2(e) {
				if (this.loading) {
					return false
				}
				this.params.category_id2 = e.id
				this.getList()
			},
			refresherrefresh() {
				this.isPull = true
				this.isNext = true;
				this.init()
			},
			init() {
				this.list = []
				this.isNext = true;
				this.getCategoryList()
				this.getList()
			},
			setHeight() {
				const that = this
				uni.getSystemInfo({
					success: ({
						windowHeight
					}) => {
						setTimeout(async () => {
							await that.$nextTick()
							uni.createSelectorQuery().selectAll('.list')
								.boundingClientRect(
									res => {
										// 获取列表定位
										that.listHeight =
											`calc(${ windowHeight - res[0].top}px - 106rpx)`
									}).exec()
						})

					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.layout {
		display: flex;
		height: calc(100% - 80rpx - 60rpx - 106rpx);

		&-left,
		&-right {
			height: 100%;
		}

		&-left {
			width: 240rpx;
			flex-shrink: 0;
			// background: paleturquoise;
			background: #fff;

			.item {
				width: 100%;
				padding: 10rpx 15rpx;
				min-height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color: #333;
				background: #fff;
				border-bottom: 1rpx solid #f5f5f5;
				box-sizing: border-box;

				&.active {
					color: #fff;
					font-weight: bold;
					background: var(--theme-color)
				}

				.count {
					padding: 4rpx 6rpx;
					box-sizing: border-box;
					border-radius: 6rpx;
					background: #f00;
					color: #fff;
					font-size: 20rpx;
					margin-left: 10rpx;
				}
			}
		}

		&-right {
			flex: 1;
			margin-left: 20rpx;
			// background: peachpuff
			background: #fff;

			.categoryList2Warp {
				font-size: 28rpx;
				display: flex;
				flex-wrap: wrap;

				.item {
					&.active {
						color: #fff;
						font-weight: bold;
						background: var(--theme-color)
					}
				}
			}
		}
	}

	// 底部操作栏
	.footer-fixed {
		// position: fixed;
		// bottom: var(--window-bottom);
		// left: 0;
		// right: 0;
		display: flex;
		// z-index: 11;
		box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
		background: #fff;

		// 设置ios刘海屏底部横线安全区域
		// padding-bottom: constant(safe-area-inset-bottom);
		// padding-bottom: env(safe-area-inset-bottom);
		justify-content: center;
		align-items: center;
		height: 106rpx;

		.button {
			width: 50%
		}
	}
</style>
<style lang="scss" scoped>
	/deep/.app-container {
		height: 100%;
	}

	.scroll-view {
		margin-top: 20rpx;

	}

	.search {
		height: 80rpx;
		background: #fff;
		padding: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		padding: 20rpx 20rpx;
		margin-bottom: 20rpx;

		&-input {
			width: 100%;
			display: flex;
			align-items: center;

			&-label {
				width: 17%;
				font-size: 28rpx;
				text-align: center;
			}
		}
	}

	.check-tabs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;
		margin: 20rpx;
		background: #fff;

		&__item {
			flex: 1;
			text-align: center;
			color: #666;
			position: relative;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;

			&.active {
				background: var(--theme-color);
				color: #fff;
			}

			&::before {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				width: 1rpx;
				background: #f5f5f5
			}
		}
	}

	.item {
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;

		&-body {
			display: flex;
			justify-content: space-between;
			position: relative;

			.image {
				height: 160rpx;
				width: 160rpx;
				background: #f5f5f5;
				border-radius: 6rpx;
				flex-shrink: 0;
			}

			.content {
				flex: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: rgba(59, 130, 234, 1);
				}

				.price,
				.number {
					font-size: 20rpx;
					color: #666;
					margin-top: 6rpx;

					text {
						color: #f00;
					}
				}

				.price-title {
					font-size: 18px;
				}
			}
		}

	}
</style>